<template>
  <div id="container" class="testG6"></div>
</template>

<script>
import { defineComponent, onMounted } from 'vue';
import G6 from '@antv/g6';
export default defineComponent({
  name: 'testIndex',
  components: {},
  setup() {
    const container = document.getElementById('container');
    console.log('container---', container);
    const width = 1000;
    const height = width || 500;

    onMounted(() => {
      const graph = new G6.Graph({
        container: 'container',
        width,
        height,
        layout: {
          type: 'force',
        },
        defaultNode: {
          size: 15,
        },
      });
      fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/relations.json')
        .then(res => res.json())
        .then(data => {
          graph.data({
            nodes: data.nodes,
            edges: data.edges.map(function (edge, i) {
              edge.id = 'edge' + i;
              return Object.assign({}, edge);
            }),
          });
          graph.render();

          graph.on('node:dragstart', function (e) {
            graph.layout();
            refreshDragedNodePosition(e);
          });
          graph.on('node:drag', function (e) {
            const forceLayout = graph.get('layoutController').layoutMethods[0];
            forceLayout.execute();
            refreshDragedNodePosition(e);
          });
          graph.on('node:dragend', function (e) {
            e.item.get('model').fx = null;
            e.item.get('model').fy = null;
          });

          if (typeof window !== 'undefined')
            window.onresize = () => {
              if (!graph || graph.get('destroyed')) return;
              if (!container || !container.scrollWidth || !container.scrollHeight) return;
              graph.changeSize(container.scrollWidth, container.scrollHeight);
            };
        });

      function refreshDragedNodePosition(e) {
        const model = e.item.get('model');
        model.fx = e.x;
        model.fy = e.y;
      }
    });
    return {
      G6,
    };
  },
});
</script>

<style>
.testG6 {
  width: 100%;
  height: 1000px;
  border: 1px solid #fff;
}
</style>
